<template>
	<view :class="[primarySize()]">
		<view class="page-foot">
			<view class="foot_btn" @click="uploadImages">
				<button hover-class="none" class="btn1">继续添加</button>
			</view>
		</view>
		<view class="container">
			<view class="clearfix plr30">
				<view class="pic_img" v-for="(item,index) in info.environment_images">
					<image :src="cdnurl(item)" mode="aspectFill"></image>
					<view class="close_img" @click="bindRemoveImage(index)">
						<image :src="iconPath('del.png')" mode="widthFix"></image>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {

				maxImage: 20,
				info: {}
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad: function(options) {

			this.getOpenerEventChannel().on('infoTransfer', data => {
				this.info = data.info;
			});
		},
		onUnload: function() {
			this.getOpenerEventChannel().emit('infoTransfer', {
				info: this.info
			});
		},
		methods: {
			//上传图
			uploadImages() {
				let page = this;
				let availableCount = page.maxImage - page.info.environment_images.length;
				if (availableCount < 1) {
					uni.showToast({
						title: '最多20张图片',
						icon: 'none'
					});
					return;
				}
				uni.chooseImage({
					count: availableCount,
					success: res => {
						res.tempFiles.forEach(function(file) {
							page.$core.uploadFile({
								filePath: file.path,
								success(ret, response) {
									page.info.environment_images.push(ret.data.url);
								}
							});
						});
					}
				});
			},
			bindRemoveImage(index) {
				this.info.environment_images.splice(index, 1);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-top: 37rpx;
	}

	.pic_img {
		width: 334rpx;
		height: 351rpx;
		display: block;
		float: left;
		margin-bottom: 22rpx;
		position: relative
	}

	.pic_img:nth-child(2n) {
		float: right
	}

	.pic_img image {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 10rpx;
	}

	.foot_btn {
		padding: 10rpx 25rpx;
		background-color: #fff;
	}

	.foot_btn button {
		margin-left: 0
	}

	.close_img {
		position: absolute;
		top: -15rpx;
		right: -15rpx;
	}

	.close_img image {
		width: 30rpx;
		height: 30rpx;
	}
</style>